<template>
  <div id="mainDiv">
    <div id="info">
      <p id="title">会员中心</p>
      <ul> <!-- 无序列表 1 .是独占一行，内部元素li独占一行-->
        <li><span>姓名:</span><span alt="cname">{{student.name}}</span><span>联系方式:</span><span alt="mphone">{{student.homephone}}</span><span>性别:</span><span alt="csex">{{student.sex}}</span></li>
        <li><span>出生日期:</span><span id="mydate" alt="cbirthday" isdate="true">{{student.birthday}}</span>
          <span>会员等级:</span><span alt="clevel">成都信息工程大学 </span><span>余额:</span><span alt="ccost">￥36</span></li>
      </ul>
      <div id="photo"></div>
    </div>
    <div id="dietitians">
      <p>我的选课</p>
      <hr>
      <ul>
        <li v-for="(sc,index) in student.scs"><span>{{sc.scno}}</span><span>{{sc.cno}}{{sc.course.cname}}</span><span>{{sc.tno}}{{sc.teacher.tname}}</span></li>
      </ul>
      <el-button size="mini" @click="handleSelectCourse">
        新增
      </el-button>
    </div>
    <div id="employrecords">
      <p></p>
      <hr>

    </div>
    <div id="projectdesc"></div>

    <selectCourse v-if="selectCourseDialogIsShow" ref="showSelectCourse"></selectCourse>
  </div>

</template>

<script>
  import selectCourse from '@/components/front/student/selectCourse.vue'
  import api from "../../../../axios/api"
  import utils from '../../../../static/js/utils/utils.js'
  import utilsFD from "../../../../static/js/utils/index.js"
 // let sno = utils.getUrlKey('sno')//也可以在路由中设置 就不需要引入js解析
  export default {
    name: "index",
    selectCourseDialogIsShow:false,
    components:{
      selectCourse
    },
    data(){
      return {
        student:{},//不能写null 不影响结果 但浏览器 渲染过程中会报错
        courses:[],
        selectCourseDialogIsShow:false,
        sno:""
      }
    },
    methods:{
      getStudent:function(){
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        alert(this.sno);
        console.log(this.$store.state.host+"/studentController/selectBySnoWithScsAndClazz/"+this.sno)
        api.setDataFromAxios("/api/studentController/selectBySnoWithScsAndClazz/"+this.sno,null,"get")
          .then(dto=>{
            console.log(dto);
            this.student = dto.t;
            this.student.birthday = utilsFD.FD.Fd().initCNDate(new Date(this.student.birthday));
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      getAllCourse:function(){
        console.log(this.$store.state.host+"/courseController/courses");
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/courseController/courses",null,"get")
          .then(dto=>{
            console.log(dto);
            this.courses = dto.tList;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },

      handleSelectCourse:function(){
        let _this = this;   //this代表方法调用者 this代表vue对象
        _this.selectCourseDialogIsShow = true;
        _this.$nextTick(() => {  //下一步操作
          _this.$refs.showSelectCourse.init(this.courses,this.student);  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddTeacher）调用子组件的init方法
        })
      },
      getCookie(){

        api.setDataFromAxios("/api/studentController/getSelectCourseCookie/"+this.sno, null, "post")
          .then(dto => {
            console.log(dto)
            if(dto.code==200){
              this.student = dto.t;
            }else{
              this.getStudent();
            }
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      }

    },
    created:function () {
      //1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
      this.sno = this.$route.params.sno;
      if(this.sno==undefined||this.sno==null||this.sno==''){
        this.sno=localStorage.getItem('sno');
      }
      this.getAllCourse();
      this.getCookie();



      // var nd = new Date();
      // nd.setSeconds(nd.getSeconds() + 60);
      // document.cookie = "cookietest=1; expires=" + nd.toGMTString();
      // var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
      // if(!cookiesEnabled) {
      //   //没有启用cookie
      //   alert("没有启用cookie ");
      // } else{
      //   //已经启用cookie
      //   alert("已经启用cookie ");
      // }
    }
  }
</script>

<style scoped>
  /*margin表示到外边框，上一层元素的距离，最外层的div的上一层元素就是body，到左和右都为auto 就表示水平居中*/
  #mainDiv{border:solid 1px;width:1000px;height:;margin-left:auto;margin-right: auto;
    font-family: "微软雅黑";}
  #info{height:240px;border: dashed 1px;position: relative;}
  #title{width:200px; margin-left:auto;margin-right: auto;text-align: center;font-size:36px;
    margin-top:16px;}
  /* 用关系查找元素 来设置  例如   >  子元素*/
  #info > ul > li{list-style-type: none;margin-top:5px;}
  #info > ul > li > span{height:26px;display: inline-block;}
  #info > ul > li > span:nth-child(1){width:80px;}
  #info > ul > li > span:nth-child(2){width:140px;}
  #info > ul > li > span:nth-child(3){width:80px;}
  #info > ul > li > span:nth-child(4){width:140px;}
  #info > ul > li > span:nth-child(5){width:80px;}

  #employrecords{position: relative;}
  #employrecords >p {background-color: red;width:100px;height:26px;text-align: center;line-height: 26px;color:white;
    border-radius: 4px 4px 0px 0px}
  #employrecords > hr{width: 800px;position: absolute;top:16px;border:solid 1px red;}/*调整线的颜色*/
  #employrecords > ul > li{list-style-type: none;margin-top:5px;}
  #employrecords > ul > li > span{height:26px;display: inline-block;}
  #employrecords > ul > li > span:nth-child(1){width:100px;}
  #employrecords > ul > li > span:nth-child(2){width:100px;}
  #employrecords > ul > li > span:nth-child(3){width:80px;}
  #employrecords > ul > li > span:nth-child(4){width:200px;}
  #employrecords > ul > li > span:nth-child(5){width:80px;}

  #dietitians{position: relative;}
  #dietitians >p {background-color: red;width:100px;height:26px;text-align: center;line-height: 26px;color:white;
    border-radius: 4px 4px 0px 0px}
  #dietitians > hr{width: 800px;position: absolute;top:16px;border:solid 1px red;}/*调整线的颜色*/
  #dietitians > ul > li{list-style-type: none;margin-top:5px;}
  #dietitians > ul > li > span{height:26px;display: inline-block;}
  #dietitians > ul > li > span:nth-child(1){width:120px;}
  #dietitians > ul > li > span:nth-child(2){width:140px;}
  #dietitians > ul > li > span:nth-child(3){width:300px;}



  #photo{width:80px;height:120px; border:solid 1px;position: absolute; right: 18px; top:26px;}

</style>
